<script setup>
import { ref } from 'vue'
const activeTab = defineModel()
const props = defineProps({
  tabs: {
    type: Array,
    default: () => [
      {
        name: '全部',
        value: '全部'
      }, {
        name: '待办',
        value: '待办'
      }
    ]
  }
})
const emit = defineEmits(['tabClick'])

// const activeTab = ref(props.tabs[0].value)
const tabClick = (item) => {
  emit('tabClick', item)
  activeTab.value = item.value
}
</script>

<template>
  <div class="flex">
    <div class="tab-btn" :class="{active: item.value === activeTab}" v-for="(item, index) in tabs" :key="index"
         @click="tabClick(item)">{{ item.name }}
    </div>
  </div>
</template>

<style scoped>
.tab-btn {
  padding: 4px 16px;
  background: linear-gradient(180deg, #193746 0%, #193645 100%);
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #609DBF;
  font-size: 14px;
  color: #B4C1D8;
  line-height: 16px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  cursor: pointer;
}

.active {
  background: linear-gradient(180deg, #274A6A 0%, #3D6A8C 100%);
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #609DBF;
  color: white;
}
</style>
